<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6" v-for="item, index in statistics">
                <el-card class="box-card">
                    <div class="icon">
                        <el-icon size="30" class="icon-box">
                            <UserFilled v-if="index === 0" />
                            <Loading v-if="index === 1" />
                            <Discount v-if="index === 2" />
                            <Lock v-if="index === 3" />
                        </el-icon>
                        <div>
                            <p>{{ item.value }}</p>
                            <p>{{ item.label }}</p>
                        </div>
                    </div>

                </el-card>
            </el-col>
        </el-row>

    </div>
</template>
<script setup lang='ts'>
import { agentStatisticsApi } from '@/api/agent'
import { ref } from 'vue'
const statistics = ref()

const getStatisticsList = () => {
    agentStatisticsApi().then(res => {
        statistics.value = res.data.data.panels
        console.log(res);

    })
}
getStatisticsList()

</script>
<style lang='scss' scoped>
.box-card {
    display: flex;
    align-items: center;
}

.icon {
   display: flex;
   align-items: center;

}
.icon-box{
    width:50px;
    height: 50px;
}
</style>